<script setup>
import { RouterView } from 'vue-router'
import {onMounted, ref, watch} from "vue";
import { userStore } from "@/stores/userStore.js";
import { storeToRefs } from "pinia";
import { useSocket } from "@/socket.js";
import { getFriends } from "@/api/friend.js";
import { useFriendStore } from "@/stores/friendStore.js";
import ToastFriendRequest from "@/components/ToastFriendRequest.vue";
import {getJoinedGroup} from "@/api/group.js";
const friendStore = useFriendStore()

const { userInfo, userSetting } =storeToRefs(userStore())
const system_theme = window.matchMedia("(prefers-color-scheme: light)")
const applyTheme = () => {
  if (userSetting.value) {
    document.documentElement.setAttribute('data-bs-theme', userSetting.value.theme ? 'dark' : 'light');
  } else {
    document.documentElement.setAttribute('data-bs-theme', system_theme.matches ? 'light' : 'dark');
  }
};

const setUserOnline = async () => {
  const res = await getFriends(userInfo.value.id)
  const res2 = await getJoinedGroup(userInfo.value.id)

  if (res.status === 200 && res2.status === 200) {
    useSocket().emit("setOnline", {
      uid: userInfo.value.id,
      friendList: res.data,
      joinedGroup: res2.data
    });
  } else {
    console.error(res);
  }
}


watch(userInfo, async (newVal) => {
  if (newVal) {
    socketStartListen()
  }
})


system_theme.addEventListener('change', applyTheme);
const friendRequestToast = ref()
const sender_info = ref({})
const socketStartListen = () => {
  const socket = useSocket()
  socket.on('newFriendReq', data => {
    sender_info.value = data
    friendRequestToast.value.toast_show()
  })

  socket.on('friendAccepted', data => {
    console.log(data)
    friendStore.addFriend(data)
  })
}

onMounted(async ()=> {
  applyTheme()
  if (userInfo.value) {
    console.log('SOCKET ON')
    await setUserOnline()
    socketStartListen()
  }
})

</script>

<template>
  <ToastFriendRequest ref="friendRequestToast" :sender_info="sender_info"/>
  <RouterView/>
</template>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  transition: background-color 200ms ease-in-out;
}

:root, [data-bs-theme=light] {
  --nickname: #2f3035;
  --myTabsColor: #f1f1f1;
  --myTabsColor-rgb: 241, 241, 241;
  --myPanelColor: #e7e7e7;
  --iconColor: #5f606a;
  --iconColorHover: #4e4f57;
  --iconBtnColor: #73747d;
  --iconBtnColorHover: #5e5e65;
  --msgColor: #323339;
  --scrollbarThumb: #666770;
  --card-btn-color: rgba(49, 49, 49, 0.81);
  --card-btn-color-hover: rgba(38, 38, 38, 0.81);
}

[data-bs-theme=dark] {
  --iconBtnColor: #acadb3;
  --iconBtnColorHover: #ceced3;
  --nickname: #fdfdfd;
  --myTabsColor: #1e2125;
  --myTabsColor-rgb: 30, 33, 37;
  --myPanelColor: #1a1d20;
  --iconColor: #c3c4c8;
  --iconColorHover: #d4d6da;
  --msgColor: #c2c3c6;
}

.username {
  color: var(--nickname);
}

.btnIcon {
  cursor: pointer;
  color: var(--iconBtnColor);
}
.btnIcon:hover {
  color: var(--iconBtnColorHover);
}

.fIcon {
  color: var(--iconColor);
}
.fIcon:hover {
  color: var(--iconColorHover);
}

.msg {
  color: var(--msgColor);
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--scrollbarThumb);
}
::-webkit-scrollbar-track-piece {
  //background-color: var(--bs-tertiary-bg);
}
::-webkit-scrollbar {
  //background-color: var(--bs-tertiary-bg);
}



</style>